/**
 * Created by zzy on 2017/8/21.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    PixelRatio,
    Animated,
    WebView,
    Dimensions
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import TicketInfo from '../home/TicketInfo'
import TicketInfoPage from '../home/TicketInfoPage'
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ShareUtil from '../common/ShareUtil'
import Share from '../component/ShareModal'
import {observer} from 'mobx-react/native'
import {observable, action, computed} from 'mobx'
import waterTiket from '../store/WaterTiketPolicyMsg';
import Modal from 'react-native-modalbox';
import Constant from "../Contant";
import {Footer,PopOut,FooterCart} from './WaterShop';
import  waterShopStore from '../store/WaterShopStore'
let ScreenWidth = Dimensions.get('window').width;

@observer
export default class TicketDetails extends Component{
    static navigationOptions = {
        header: null
    };
    @observable isOpen=false;
    @observable shoppingcartScale = new Animated.Value(0);

    constructor(props){
        super(props);
        this.product=this.props.navigation.state.params.product;
        this.tagItem=this.props.navigation.state.params.tagItem;
        this.shopId=this.props.navigation.state.params.shopId;
    }
    render(){

        return <View style={ticketDetail_style.container}>
            <ScrollableTabView initialPage={0}
                               style={{height:90}}
                               renderTabBar={()=> <HeadView shareBack={this._startShare.bind(this)
                               } {...this.props}/>}
                               tabBarActiveTextColor='#4dc0ff'
                               tabBarInactiveTextColor='#333333'
                               tabBarUnderlineStyle={{backgroundColor:'#4dc0ff',height:2,width:10}}>
                <TicketInfo tabLabel="水票" {...this.props} product={this.product} tagItem={this.tagItem} shopId={this.shopId}/>
                <TicketInfoPage tabLabel="详情" />
            </ScrollableTabView>
            <PopOut
                selectedItemList={waterShopStore.selectedItemList}
                isOpen={this.isOpen}/>
            <Footer
                scale={this.shoppingcartScale}
                totalPrice={waterShopStore.totalPrice}
                conformOrder={()=>{
                    this.isOpen = false;
                    setTimeout(()=>{
                        this.props.navigation.navigate('ConfirmOrder', {shopId: this.shopId}) ;
                    },500)
                }}/>
            <FooterCart toggleShoppingCart={() => {
                this.isOpen = !this.isOpen;
            }}/>
            <Share ref="modal1" shareCall={this._share} info={this.productDetailInfo}/>
            <Modal
                style={{height:250,backgroundColor:'#ffffff',width:ScreenWidth,borderRadius:5}}
                position={"bottom"}
                onClosed={this.onClose}
                onOpened={this.onOpen}
                ref={"modalCart"}
                backButtonClose={true}
            >
                <View style={{flexDirection:'row',justifyContent:'space-between',padding:7,backgroundColor:'#f5f5f5'}}>
                    <Text>已选商品</Text>
                    <Text onPress={()=>{
                        waterTiket.CartClear();
                    }}>清空</Text>
                </View>
                <ScrollView style={{flex:1}}>
                    {
                        waterTiket.CartTiket.map((tiket,i)=>{
                            return  tiket.hasInCart?
                                <View style={{flexDirection:'row',padding:10}} key={i}>
                                    <Text style={{flex:1}}>{tiket.des}</Text>
                                    <View style={{flexDirection:'row',alignItems:'center'}}>
                                        <Text style={{color:'red',marginRight:10}}>¥{tiket.SingelPrice+''}</Text>
                                        <View style={{flexDirection:'row',alignItems:'center'}}>

                                            <TouchableOpacity activeOpacity={1}
                                                              onPress={()=>{
                                                                  waterTiket.decreaseMultiple(tiket);
                                                              }}>
                                                <Ionicons name="ios-remove-circle" size={25} color="#1EAFF3"/>
                                            </TouchableOpacity>
                                            <Text style={{padding:8}}>{tiket.multiple+''}</Text>
                                            <TouchableOpacity activeOpacity={1}
                                                              onPress={()=>{
                                                                  waterTiket.addMultiple(tiket);
                                                              }}>
                                                <Ionicons name="ios-add-circle" size={25} color="#1EAFF3"/>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </View>:(null)
                        })
                    }
                </ScrollView>
            </Modal>

        </View>
    }

    _startShare(){
        this.refs.modal1._open();
    };
    _modalCart(){
        this.refs.modalCart.open();
    }
    _share(type, productDetailInfo) {
        var shareParam = {
            type: 'news',
            title: '汇贝送水',
            description: '汇贝送水',
            messageAction: undefined,
            messageExt: undefined,
            webpageUrl: 'http://www.jianshu.com/p/3f424cccb888',
        };
        type == 0 ? ShareUtil.shareToSession(shareParam) : ShareUtil.shareToTimeline(shareParam)
    }
}

const HeadView = React.createClass({
    propType: {
        goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
        tabStyle: View.propTypes.style,
        underlineStyle: View.propTypes.style,
    },
    render(){
        const backS = {
            flexDirection:'row',
            height:50,
            alignItems:'center',
            flex:1,
        };
        const btnS = {
            height:35,
            justifyContent:'center',
            alignItems:'center',
            flex:1
        };
        const {goBack} = this.props.navigation;
        return <View style={{flexDirection:'row',alignItems:'center'}}>
            <TouchableOpacity activeOpacity={1}
                      onPress={()=>{
                          goBack()
            }}>
               <Ionicons name="ios-arrow-back" size={30} style={{padding:10}}/>
            </TouchableOpacity>
            <View style={backS}>
            {this.props.tabs.map((tab, i)=> {
                let textColor = this.props.activeTab==i ? '#4dc0ff' : '#333333';
                let lineColor = this.props.activeTab==i ? '#4dc0ff' : '#ffffff';
                return <TouchableOpacity style={btnS}
                                         activeOpacity={1}
                                         onPress={()=>{
                                             this.props.goToPage(i)
                                         }}
                                         key={tab}>
                    <Text style={{color:textColor}}>{tab}</Text>
                    <View style={{position: 'absolute',backgroundColor:lineColor,width:50,height:2,bottom: 0}}></View>
                </TouchableOpacity>
            })}
        </View>
            <TouchableOpacity style={{alignItems:'center',justifyContent:'center',marginRight:10}} onPress={()=>{
                this.props.shareBack();
            }}>
                <Image style={{width:25,height:25,resizeMode:'contain'}}
                       source={require('../../asserts/shop/common_head_icon_share.png')}
                ></Image>
            </TouchableOpacity>
        </View>
    }
});

const ticketDetail_style=StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: 'white'
    }
})